
<template>
<my-form v-model="form" @submit="submit" @cancle="cancle" ref="form" labelWidth='150px'  >
        <el-row>
			<el-col :span="24">
                <el-form-item label="选择结算期：" prop="">
                    <el-radio-group v-model="selectvalue">
                        <el-radio-button  v-for="item in selectvalueList" :key="item.key" :label="item.key">{{item.value}}</el-radio-button>
                    </el-radio-group>
                    <span style="padding-left:10px;color:red">项目开标7日后可进行结算</span> 
                </el-form-item>
			</el-col>
            <el-col :span="12" v-show='selectvalue == 1'>
                <el-form-item label="选择日期：" prop="valuetime" >
                    <el-date-picker
                        v-model="valuetime"
                        type="daterange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="changeDay">
                    </el-date-picker> 
                </el-form-item>
			</el-col>

            <el-col :span="12" v-show='selectvalue == 2'>
                <el-form-item label="项目名称：" prop="settBidsection" >
                        <el-select
                            ref="projectname"
                            v-model="form.settBidsection" 
                            placeholder="请输入项目名称关键字" 
                            style="width: 100%;" filterable remote  reserve-keyword multiple
                            :remote-method="projectListFilter"  
                            :loading="loading" 
                            no-data-text="暂无搜索数据"
                            @change="projectSelect">
                            <el-option v-for="item in projectList" :key="item.bidsection" :label="item.bidsection" :value="item.bidsectionno"></el-option>
                        </el-select>
                </el-form-item>
			</el-col>
            <el-col :span="12" v-show='selectvalue == 3'>
                <el-form-item label="招标代理：" prop="" >
                    <el-select
                        ref="projectname"
                        v-model="form.settBidAgencyName" 
                        placeholder="请输入招标代理名称关键字" 
                        style="width: 100%;" filterable remote  reserve-keyword multiple
                        :remote-method="zbdlListFilter"  
                        :loading="loading" 
                        no-data-text="暂无搜索数据"
                        @change="zbdlSelect">
                        <el-option v-for="item in zbdlList" :key="item.bidAgencyNo" :label="item.bidAgencyName" :value="item.bidAgencyName"></el-option>
                    </el-select>
                </el-form-item>
			</el-col>

        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="结算清单名称：" prop="itemName" :rules="newRule('结算清单名称', 'required')">
                    <el-input  v-model="form.itemName" placeholder="参考格式：某年某月某地区结算清单" clearable ></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="申请人电话：" prop="appPhone" :rules="newRule('申请人电话', 'required')">
                    <el-input  v-model="form.appPhone" placeholder="请输入申请人电话" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="费用总额：" prop="" >
                    {{form.itemAmount}} <span>元</span>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="结算金额：" prop="" >
                    {{form.settAmount}} <span>元</span>
                </el-form-item>
			</el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="收款账号：" prop="" >
                    {{form.jbzhzh || '-'}}
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="清单备注：" prop="remark" >
                    <el-input  v-model="form.remark" placeholder="请输入清单备注" clearable></el-input>
                </el-form-item>
			</el-col>
		</el-row>
        <span type="danger" slot="btn" v-if="form.settAmount == 0 && form.itemAmount == 0" style="font-size:15px">暂无可结算订单</span>
    </my-form>

</template>

<script>


export default {

    props:[],
    components:{},
    data: function(){
        return{
            form:{
                itemAmount:'',
                settAmount:'',
                jbzhzh:''    
            },
            pgData:{
               settStart:'',
               settEnd:''
            },
            selectvalue:'',
            loading:false,
            projectList:[],
            projectStr:'',
            selectvalueList:[
                {value:'按日期结算',key:'1'},
                {value:'按项目结算',key:'2'},
                {value:'按招标代理结算',key:'3'},
            ],
            zbdlList:[],
            zbdlStr:'',
        }
    }, 
    computed:{
        valuetime:{
            get:function(){
                var startTime = this.pgData.settStart || '';
                var endtime = this.pgData.settEnd || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.settStart = '' ;
                    this.pgData.settEnd = '';
                }else{
                    var startTime = val[0] || '';
                    var endtime = val[1] || '';
                    this.pgData.settStart = startTime;
                    this.pgData.settEnd = endtime;
                }
            },
        }  
    },
    watch:{
        selectvalue:function(n,o){
            if(n != o ){
                this.pgData.settStart = '';
                this.pgData.settEnd = '';
                this.form.settBidsection = '';
                this.projectStr ='';
                this.projectList = [],
                this.zbdlStr ='';
                this.zbdlList = [],
                this.getInfo('','','','')
            }
        }
    },

    methods: {
        cancle:function(){
            this.$emit('close');
        },
        getInfo:function(val1,val2,val3,val4){
            var that = this;
            that.$get(`${that.getGetters('settUrl')}/hcgSettItem/applyInfo`,{
                settStart:val1,
                settEnd:val2,
                bidsection:val3,
                bidAgencyName:val4
            },function(data){
                that.form.itemAmount= data.itemAmount;
                that.form.settAmount = data.settAmount;
                that.form.jbzhzh = data.jbzhzh;
            })
        },
        submitTip:function(){
                var that = this;
                showConfirm('请核实项目名称，如含有已添加结算的项目系统将自动取消，确定将提交合作商确认结算。', 'warning', () => {
                that.new_submit();
            });
        },

        new_submit:function(){
            var that =this;
                let obj = {
                    settType:that.selectvalue,
                    itemName:that.form.itemName,
                    settStart:that.pgData.settStart,
                    settEnd:that.pgData.settEnd,
                    appPhone:that.form.appPhone,
                    remark:that.form.remark,
                    settBidsection: that.projectStr,
                    settBidAgencyName: that.zbdlStr,
                }
                let newObj = JSON.stringify(obj); 
                let token = that.getQuery('token') ? that.getQuery('token') : ''
                $.ajax({
                        url:"/bhtong/settmg/hcgSettItem/applySett",
                        type:"POST",
                        data:newObj,
                        headers:{'Content-Type': 'application/json','token':token},
                        success:function(data){
                            if(data.code == 'v'){
                                that.cancle();
                                ShowMsg('申请成功','success');
                            }else{
                                ShowMsg(data.msg,'warning');
                            }
                        },
                        error:function(){

                        }
                })
        },
        submit:function(){
            var that =this;
            that.new_submit();
        },
        changeDay:function(val){
            if(val){
                this.getInfo(val[0],val[1],'','');
            }else{
                 this.getInfo('','','','');
            }
        },
        //项目名称远程搜索
        projectListFilter:function(query){
            if (query !== '') {
                this.loading = true;
                this.$get('/bhtong/ordermg/hcgOrder/listSelect',{bidsection:query},function(data){
                    this.projectList = data;
                    this.loading = false;
                });
            } else {
                this.projectList = [];
            }
        }, 
        projectSelect:function(val){
            if(val == ''){
                this.projectList = [];
            }
            this.projectStr = val.toString();
            this.getInfo('','',this.projectStr,'');
        },
        //招标代理远程搜索
        zbdlListFilter:function(query){
            if (query !== '') {
                this.loading = true;
                this.$get('/bhtong/ordermg/hcgOrder/listSelectBidAgency',{bidAgencyName:query},function(data){
                    this.zbdlList = data;
                    this.loading = false;
                });
            } else {
                this.zbdlList = [];
            }
        }, 
        zbdlSelect:function(val){
            if(val == ''){
                this.zbdlList = [];
            }
            this.zbdlStr = val.toString();
            this.getInfo('','','',this.zbdlStr);
        },
        //是否分销商
        isfxs:function(){
            if(this.getGetters('user').isfxs == true || this.getQuery('isfxs') == 'true'){
                let newarr = this.selectvalueList;
                this.selectvalueList = newarr.slice(1);
                this.selectvalue = this.selectvalueList[0].key;
            }else{
                this.selectvalue = this.selectvalueList[0].key;
            }
        },

    },
    mounted() {
        this.getInfo('','','','');
        this.isfxs();
    }
}
</script>

<style scoped lang="scss">

</style>
